
// 设置后台服务地址
axios.defaults.baseURL = "http://localhost:8089";
axios.defaults.timeout = 3000;

let app = new Vue({
    el: "#app",
    data: {
        isTest: false,
        filterNames: {
            brand: "品牌",
            city: "城市",
            starName: "星级",
            price: "价格",
        },
        filterList: {},// 过滤项的假数据
        sortItems: [
            {
                key: "default",
                text: "默认",
            },
            {
                key: "score",
                text: "评价",
            },
            {
                key: "price",
                text: "价格",
            }
        ],// 排序字段的假数据
        hotels: [],// 酒店数据
        total: 0, // 总条数
        totalPage: 0, // 总页数
        params: {
            key: "", // 搜索关键字
            page: 1, // 当前页码
            size: 5, // 每页大小
            sortBy: "default",// 排序字段
            filters: {}, // 过滤字段
        },
        map: {},// 地图对象
        loc: "", // 地图标记
        ml: 0, // 控制地图位置
        geolocation:{}, // 定位系统
        loading: false, // 是否在定位
        currentHotel: {},
        ops: [],
        showOps: false,
        opsIndex: -1,
        isFixed: false,
        testFilterData: {
            "city": ["上海", "北京", "深圳", "杭州"],
            "starName": ["四星","五星","二钻","三钻","四钻","五钻"],
            "brand": ["7天酒店",  "如家","速8", "皇冠假日","华美达","万怡","喜来登","万豪","和颐","希尔顿"],
        },
    },
    watch: {
        "params.sortBy"() {
            // 每当page改变，当前代码就会执行。搜索一下
            this.search(this.loc);
        },
        "params.page"() {
            // 每当page改变，当前代码就会执行。搜索一下
            this.search(this.loc);
        },
        "params.filters": {
            deep: true,
            handler() {
                this.search();
                // 获取过滤项
                this.getFilter();
            }
        },
        opsIndex() {
            if (this.opsIndex !== -1) {
                this.params.key = this.ops[this.opsIndex]
            }
        }
    },
    created() {
        // 页面加载时，先搜索一下
        this.search();
        // 获取过滤项
        this.getFilter();
    },
    mounted() {
        //初始化地图
        this.map = new AMap.Map('container', {
            resizeEnable: true, //是否监控地图容器尺寸变化
            zoom: 11, //初始地图级别
            center: [120.0, 32.0], //初始地图中心点
        });
        // 初始化定位系统
        AMap.plugin('AMap.Geolocation', () => {
            this.geolocation = new AMap.Geolocation({
                position: 'RT',    //定位按钮的停靠位置
                buttonOffset: new AMap.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
                zoomToAccuracy: true,   //定位成功后是否自动调整地图视野到定位点
            });

            // AMap.Event.addListener(geolocation, 'complete', result => {
            //   if (this.params.page !== 1) {
            //     this.params.page = 1;
            //     this.loc = result.position.lat + ", " + result.position.lng;
            //   } else {
            //     this.searchByMap(result.position.lat + ", " + result.position.lng);
            //   }
            //
            // });//返回定位信息
            // AMap.Event.addListener(geolocation, 'error', err => console.log(err));      //返回定位出错信息
        });

        let oDiv = document.querySelector(".map-box"),
            H = 0,
            Y = oDiv;
        while (Y) {
            H += Y.offsetTop;
            Y = Y.offsetParent;
        }
        window.addEventListener('scroll', () => this.handleScroll(H, oDiv));
    },
    methods: {
        handleScroll(h, o) {
            let s = document.body.scrollTop || document.documentElement.scrollTop
            this.isFixed = s > h;
            this.ml = o.offsetLeft;
        },
        handleKeyUp(e) {
            if ((e.keyCode >= 48 && e.keyCode <= 57) || (e.keyCode >= 65 && e.keyCode <= 90) || e.keyCode === 8) {
                // 用户输入的字符，需要自动补全
                this.getSuggestion();
            } else if (e.keyCode === 13) {
                // 用户按回车，需要搜索
                this.search();
                this.getFilter();
            } else if (e.keyCode === 38) {
                if (this.opsIndex > 0) {
                    this.opsIndex--;
                } else {
                    this.opsIndex = this.ops.length - 1;
                }
            } else if (e.keyCode === 40) {
                this.opsIndex = (this.opsIndex + 1) % this.ops.length;
            } else if (e.keyCode === 27) {
                this.show = false
            }
        },
        handleSearch(){
            this.search();
            this.getFilter();
        },
        getSuggestion() { // 查询自动补全
            if (!this.params.key) {
                // key没有值，不去搜索了
                this.ops = [];
                return;
            }
            axios.get("/hotel/suggestion?key=" + this.params.key)
                .then(resp => {
                    this.ops = resp.data;
                })
                .catch(e => {
                    if(this.isTest){
                        this.ops = ["万豪", "如家", "喜来登"]
                    }else{
                        this.ops = []
                    }
                    console.log(e);
                })
        },
        getFilter() {
            if(this.isTest){
                this.filterList = this.testFilterData;
                return;
            }
            // 准备参数
            const {filters: {price: ps, ... fs}, ...params} = this.params;
            for( _k in fs){
                params[_k] = fs[_k];
            }
            // 处理价格
            if(ps){
                let pArr = ps.split("-");
                params.minPrice = parseInt(pArr[0]);
                let max = parseInt(pArr[1]);
                params.maxPrice = max === 0 ? 999999 : max;
            }
            axios.post("/hotel/filters", params)
                .then(resp => {
                    this.filterList = resp.data;
                })
                .catch(err => {
                    console.log(err);
                    this.filterList = this.testFilterData;
                })
        },
        searchByMap(location) {
            // 准备参数
            const {filters: {price: ps, ... fs}, ...params} = this.params;
            for( _k in fs){
                params[_k] = fs[_k];
            }
            // 处理价格
            if(ps){
                let pArr = ps.split("-");
                params.minPrice = parseInt(pArr[0]);
                let max = parseInt(pArr[1]);
                params.maxPrice = max === 0 ? 999999 : max;
            }

            // 准备地址
            if (location) {
                params.location = location;
                this.loc = location;
            }

            axios.post("/hotel/list", params)
                .then(resp => {
                    this.hotels = resp.data.hotels;
                    this.total = resp.data.total;
                    this.totalPage = Math.floor((this.total + 5 - 1) / 5);
                    if (location) {
                        this.setMapCenter(location);
                    } else if(this.hotels && this.hotels.length > 0){
                        this.setMapCenter(this.hotels[0].location);
                    }
                    this.initMarker();
                })
                .catch(err => {
                    console.log(err)
                    this.hotels = [{"id":60223,"name":"上海希尔顿酒店","address":"静安华山路250号","price":2688,"score":37,"brand":"希尔顿","city":"上海","starName":"五星级","business":"静安寺地区","location":"31.219306, 121.445427","pic":"https://m.tuniucdn.com/filebroker/cdn/res/92/10/9210e74442aceceaf6e196d61fc3b6b1_w200_h200_c1_t0.jpg"},{"id":60922,"name":"上海虹桥祥源希尔顿酒店","address":"红松东路1116号","price":1108,"score":45,"brand":"希尔顿","city":"上海","starName":"五钻","business":"虹桥地区","location":"31.18746, 121.395312","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/tQRqDTFkHnHzMZiDKjcGV81ekvc_w200_h200_c1_t0.jpg"},{"id":309208,"name":"北京王府井希尔顿酒店","address":"王府井东街8号","price":1679,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"天安门/王府井地区","location":"39.914539, 116.413392","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-TF3ePt2IX9UEAALb6VYBSmoAAGKMgGsuW8AAtwB147_w200_h200_c1_t0.jpg"},{"id":395434,"name":"北京希尔顿酒店","address":"东三环北路东方路1号","price":350,"score":45,"brand":"希尔顿","city":"北京","starName":"五星级","business":"燕莎/朝阳公园商业区","location":"39.952703, 116.462387","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3fwNbKGhk6XCrkdVyxwhC5uGpLVy_w200_h200_c1_t0.jpg"},{"id":395702,"name":"北京首都机场希尔顿酒店","address":"首都机场3号航站楼三经路1号","price":222,"score":46,"brand":"希尔顿","city":"北京","starName":"五钻","business":"首都机场/新国展地区","location":"40.048969, 116.619566","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/52/10/Cii-U13ePtuIMRSjAAFZ58NGQrMAAGKMgADZ1QAAVn_167_w200_h200_c1_t0.jpg"},{"id":615175,"name":"千岛湖滨江希尔顿度假酒店","address":"环湖北路600号","price":1265,"score":47,"brand":"希尔顿","city":"杭州","starName":"五钻","business":"千岛湖镇","location":"29.603634, 119.077596","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/6qzYeUrrXsH5H3cd9bMXLz8MJtT_w200_h200_c1_t0.jpg"},{"id":2351601,"name":"深圳蛇口希尔顿南海酒店","address":"望海路1177号","price":509,"score":47,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"深圳湾口岸/蛇口","location":"22.479373, 113.916013","pic":"https://m.tuniucdn.com/fb2/t1/G6/M00/45/EA/Cii-TF3ZpXOIfa6fAAJjiUOiuYgAAFrtgDtgpQAAmOh799_w200_h200_c1_t0.jpg"},{"id":368701368,"name":"深圳大中华希尔顿酒店","address":"福田深南大道1003号","price":1666,"score":46,"brand":"希尔顿","city":"深圳","starName":"五钻","business":"会展中心/CBD","location":"22.539313, 114.069763","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/4EnHseZ73LXdFJY7DSdJ8xqAcjXe_w200_h200_c1_t0.jpg"},{"id":2048042240,"name":"北京大兴希尔顿酒店","address":"高米店南里18号楼","price":1283,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"大兴北京新机场地区","location":"39.76875, 116.339199","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/3B32F8zSU2CJCWzs1hoH2o4WcquR_w200_h200_c1_t0.jpg"},{"id":2056105938,"name":"北京通州北投希尔顿酒店","address":"新华东街289号2号楼","price":1068,"score":48,"brand":"希尔顿","city":"北京","starName":"五钻","business":"果园环岛/通州区","location":"39.908805, 116.659748","pic":"https://m.tuniucdn.com/fb3/s1/2n9c/NGKdpec3tZJNUUNWJ5pd67Cp5AY_w200_h200_c1_t0.png"}]
                    this.total = 271;
                    this.totalPage = 28;
                })
        },
        search(location) {
            // 发送ajax
            this.searchByMap(location);

        },
        prePage() {
            if (this.params.page > 1) {
                this.params.page--
            }
        },
        nextPage() {
            if (this.params.page < this.totalPage) {
                this.params.page++
            }
        },
        clickPrice(min, max) {
            this.params.minPrice = min;
            this.params.maxPrice = max;
        },
        clickFilter(key, option) {
            this.loc = "";
            const {...obj} = this.params.filters;
            obj[key] = option;
            this.params.filters = obj;
        },
        deleteFilter(k) {
            this.loc = "";
            const {...obj} = this.params.filters;
            delete obj[k];
            this.params.filters = obj;
        },
        location(loc) {
            let arr = loc.split(", ");
            let json = '[' + arr[1] + ', ' + arr[0] + ']'
            return JSON.parse(json);
        },
        initMarker() {
            if (!this.loc) {
                this.map.clearMap();
            }
            this.markHotels();
        },
        setMapCenter(location){
            this.map.setCenter(this.location(location));
        },
        markHotels(){
            this.hotels.forEach((h, i) => {
                // 将创建的点标记添加到已有的地图实例：
                let marker = new AMap.Marker({
                    position: this.location(h.location),   // 经纬度构成的一维数组[116.39, 39.9]
                    title: h.name,
                    offset: new AMap.Pixel(0, 0),
                    anchor:'bottom-center'
                });
                marker.vid = h.id;
                this.map.add(marker);
            });
        },
        handleMarkerFocus(h) {
            this.map.setCenter(this.location(h.location));
            let old = this.currentHotel;
            let oldMarker = this.map.getAllOverlays("marker").find(m => m.vid === old.id);
            if (oldMarker) {
                this.updateMarker(oldMarker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png", "", this.location(old.location), old.id);
            }

            this.currentHotel = h;
            let marker = this.map.getAllOverlays("marker").find(m => m.vid === h.id);
            this.updateMarker(marker, "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png", h.name, this.location(h.location), h.id);
        },
        updateMarker(marker, icon, text, position, id) {
            // 自定义点标记内容
            var markerContent = document.createElement("div");

            // 点标记中的图标
            var markerImg = document.createElement("img");
            markerImg.className = "markerlnglat";
            markerImg.src = icon;
            markerImg.setAttribute('width', '25px');
            markerImg.setAttribute('height', '34px');
            markerContent.appendChild(markerImg);

            // 点标记中的文本
            if (text) {
                var markerSpan = document.createElement("span");
                markerSpan.className = 'marker';
                markerSpan.innerHTML = text;
                markerContent.appendChild(markerSpan);
            }

            marker.setContent(markerContent);
            marker.setPosition(position);
            marker.vid = id;
        },
        getGeoLoc(){
            this.loading = true;
            this.geolocation.getCurrentPosition((status,result) => {
                this.loading = false;
                if(status === 'complete'){
                    console.log("successs")
                    // https://a.amap.com/jsapi/static/image/plugin/point.png
                    this.addMaker('//a.amap.com/jsapi/static/image/plugin/point.png', result.position.lng,result.position.lat);
                    if (this.params.page !== 1) {
                        this.params.page = 1;
                        this.loc = result.position.lat + ", " + result.position.lng;
                    } else {
                        this.searchByMap(result.position.lat + ", " + result.position.lng);
                    }
                }else{
                    console.log("err", status)
                }
            });
        },
        yuding(id){
            alert(id);
        },
        addMaker(iconUrl, lng, lat){
            // 创建 AMap.Icon 实例：
            let icon = new AMap.Icon({
                size: new AMap.Size(25, 25),    // 图标尺寸
                image: iconUrl,  // Icon的图像
                imageOffset: new AMap.Pixel(0, 0),  // 图像相对展示区域的偏移量，适于雪碧图等
                imageSize: new AMap.Size(25, 25)   // 根据所设置的大小拉伸或压缩图片
            });

            // 将 Icon 实例添加到 marker 上:
            let marker = new AMap.Marker({
                position: new AMap.LngLat(lng, lat),
                offset: new AMap.Pixel(0, 0),
                icon: icon, // 添加 Icon 实例
                title: '北京',
                zoom: 13,
                anchor:"center"
            });
            this.map.add(marker);
        }
    },
    computed: {
        remainFilter() {
            let keys = Object.keys(this.params.filters);
            let obj = {};
            Object.keys(this.filterList).forEach(key => {
                if (!keys.includes(key) && this.filterList[key].length > 1) {
                    obj[key] = this.filterList[key];
                }
            })
            return obj;
        }
    }
})


$(function(){
    initTree();//初始化树
})
function getPath() {
    var htt = window.location.protocol;
    var host = window.location.host;
    return htt+"//"+host;
}
var url=getPath();
//初始化树
function initTree(){
    $("#mytree").treeview({
        data:getTree(),//数据
        backColor:"silver",
        onNodeSelected:function(event, node) {
            $.addtabs({iframeHeight: 550});
            //选项卡
            $.addtabs.add({
                id:node.id,
                title:node.text,
                url:url+node.href
            });
        }
    });

}